<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>AdminLTE 3 | Dashboard</title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="../static/plugins/fontawesome-free/css/all.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Tempusdominus Bbootstrap 4 -->
  <link rel="stylesheet" href="../static/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
  <!-- JQVMap -->
  <link rel="stylesheet" href="../static/plugins/jqvmap/jqvmap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../static/dist/css/adminlte.min.css">
  <!-- overlayScrollbars -->
  <link rel="stylesheet" href="../static/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="../static/plugins/daterangepicker/daterangepicker.css">
  <!-- summernote -->
  <link rel="stylesheet" href="../static/plugins/summernote/summernote-bs4.css">
  <!-- Google Font: Source Sans Pro -->
  <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
  <!-- Select2 -->
  <link rel="stylesheet" href="../static/plugins/select2/css/select2.min.css">
  <link rel="stylesheet" href="../static/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css">
  <!-- Bootstrap4 Duallistbox -->
  <link rel="stylesheet" href="../static/plugins/bootstrap4-duallistbox/bootstrap-duallistbox.min.css">
  <!-- Bootstrap Color Picker -->
  <link rel="stylesheet" href="../static/plugins/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">
  <!-- iCheck for checkboxes and radio inputs -->
  <link rel="stylesheet" href="../static/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <!-- daterange picker -->
  <link rel="stylesheet" href="../static/plugins/daterangepicker/daterangepicker.css">
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<div class="wrapper">

  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!--左边-->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
    </ul>
    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <li class="nav-item">
        <a type="button" class="btn btn-sm" th:href="@{/login}">login</a>
      </li>
      <span>  </span>
      <li class="nav-item">
        <button type="button" class="btn btn-sm">

        </button>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

  <!-- Main Sidebar Container -->
  <aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="/" class="brand-link">
      <img src="../static/dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
           style="opacity: .8">
      <span class="brand-text font-weight-light">AirLine</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">
      <!-- Sidebar user panel (optional) -->
      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        <div class="image">
          <img src="../static/dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
        </div>
        <div class="info">
          <a href="#" class="d-block" th:text="${session.user} ? ${session.user.getUsername()}:'未登录' "></a>
        </div>
      </div>

      <!-- Sidebar Menu -->
      <nav class="mt-2">
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
          <!--航班管理-->
          <li class="nav-item has-treeview">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                航班管理
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
              <!--<li class="nav-item">
                <a href="" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>线路管理</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>航班公司管理</p>
                </a>
              </li>-->
              <li class="nav-item">
                <a href="/flight" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>航班管理</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="/" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>航班列表</p>
                </a>
              </li>
            </ul>
          </li>
          <!--座位管理-->
          <li class="nav-item has-treeview">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                座位管理
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
            <!--  <li class="nav-item">
                <a href="" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>座位类型管理</p>
                </a>
              </li>-->
              <li class="nav-item">
                <a href="/flightSeat" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>航班座位管理</p>
                </a>
              </li>
             <!-- <li class="nav-item">
                <a href="" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>价格管理</p>
                </a>
              </li>-->
            </ul>
          </li>
          <!--用户中心-->
          <li class="nav-item has-treeview">
            <a href="#" class="nav-link">
              <i class="nav-icon fas fa-tachometer-alt"></i>
              <p>
                用户中心
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">
              <li class="nav-item">
                <a th:href="@{'/user/'+${session.userId}}" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>用户信息</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="/user/book" class="nav-link">
                  <i class="far fa-circle nav-icon"></i>
                  <p>预定航班信息</p>
                </a>
              </li>
            </ul>
          </li>
        </ul>

      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>航班列表</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item">航班管理</li>
              <li class="breadcrumb-item active">航班列表</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>

    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">
          <!-- 搜索框 -->
        <div class="card card-default">
            <div class="card-header">
              <h3 class="card-title">航班搜索</h3>
              <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
              </div>
            </div>
            <!-- /.card-header -->
            <!-- form start -->
           <!-- <form role="form" > -->
              <div class="card-body">
                <div class="row">
                  <!--<div class="col-md-6">
                    <div class="form-group">
                      <label>航班公司</label>
                      <select id="airway"  class="form-control select2bs4" style="width: 100%;">
                      </select>
                    </div>-->
                    <!-- Date and time range -->
                    <!--<div class="form-group">
                      <label>时间日期范围:</label>
                      <div class="input-group">
                        <div class="input-group-prepend">
                          <span class="input-group-text"><i class="far fa-clock"></i></span>
                        </div>
                        <input type="text" class="form-control float-right" id="reservationtime">
                      </div>-->
                      <!-- /.input group -->
                    <!--</div>-->
                    <!-- /.form group -->
                  <!--</div>-->
                  <!-- /.col -->
                  <div class="col-md-6">
                    <div class="form-group">
                      <label>航班路线</label>
                      <select id="router" class="form-control select2bs4" style="width: 100%;">
                      </select>
                    </div>
                  </div>
                  <!-- /.col -->
                </div>
                <!-- /.row -->
              </div>
              <!-- /.card-body -->
              <div class="card-footer">
                <button id="search" type="submit" class="btn btn-primary">Submit</button>
              </div>
            <!--</form>-->
          </div>
          <!-- /.card -->
        <div class="row">
          <div class="col-12">
            <!-- 列表 -->
            <div class="card">
              <div class="card-body table-responsive p-0">
                <table class="table table-hover text-nowrap">
                  <thead>
                  <tr>
                    <th>ID</th>
                    <th>航班公司</th>
                    <th>航班路线</th>
                    <th>起飞时间</th>
                    <th>到达时间</th>
                    <th>预定</th>
                  </tr>
                  </thead>
                  <tbody id="flightList">

                  </tbody>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
        </div>
        <!-- /.row -->

      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content -->

  </div>

  <footer class="main-footer">
    <strong>Copyright &copy; 2020-2020 <a href="http://adminlte.io">AirLine</a>.</strong>
    All rights reserved.
    <div class="float-right d-none d-sm-inline-block">
      <b>Version</b> 0.0.1-pre

    </div>
  </footer>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="../static/plugins/jquery/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="../static/plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->

<!-- Bootstrap 4 -->
<script src="../static/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- ChartJS -->
<script src="../static/plugins/chart.js/Chart.min.js"></script>
<!-- Sparkline -->
<script src="../static/plugins/sparklines/sparkline.js"></script>
<!-- JQVMap -->
<script src="../static/plugins/jqvmap/jquery.vmap.min.js"></script>
<script src="../static/plugins/jqvmap/maps/jquery.vmap.usa.js"></script>
<!-- jQuery Knob Chart -->
<script src="../static/plugins/jquery-knob/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="../static/plugins/moment/moment.min.js"></script>
<script src="../static/plugins/daterangepicker/daterangepicker.js"></script>
<!-- Tempusdominus Bootstrap 4 -->
<script src="../static/plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Summernote -->
<script src="../static/plugins/summernote/summernote-bs4.min.js"></script>
<!-- overlayScrollbars -->
<script src="../static/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script>
<!-- AdminLTE App -->
<script src="../static/dist/js/adminlte.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="../static/dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../static/dist/js/demo.js"></script>
<!-- Select2 -->
<script src="../static/plugins/select2/js/select2.full.min.js"></script>
<!-- Bootstrap4 Duallistbox -->
<script src="../static/plugins/bootstrap4-duallistbox/jquery.bootstrap-duallistbox.min.js"></script>
<!-- InputMask -->
<script src="../static/plugins/moment/moment.min.js"></script>
<script src="../static/plugins/inputmask/min/jquery.inputmask.bundle.min.js"></script>
<!-- date-range-picker -->
<script src="../static/plugins/daterangepicker/daterangepicker.js"></script>
<!-- bootstrap color picker -->
<script src="../static/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
<!-- Bootstrap Switch -->
<script src="../static/plugins/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script>
  $(function () {
    //Initialize Select2 Elements
    $('.select2').select2()

    //Initialize Select2 Elements
    $('.select2bs4').select2({
      theme: 'bootstrap4'
    })

    //Datemask dd/mm/yyyy
    $('#datemask').inputmask('dd/mm/yyyy', { 'placeholder': 'dd/mm/yyyy' })
    //Datemask2 mm/dd/yyyy
    $('#datemask2').inputmask('mm/dd/yyyy', { 'placeholder': 'mm/dd/yyyy' })
    //Money Euro
    $('[data-mask]').inputmask()

    //Date range picker
    $('#reservationdate').datetimepicker({
      format: 'L'
    });
    //Date range picker
    $('#reservation').daterangepicker()
    //Date range picker with time picker
    $('#reservationtime').daterangepicker({
      timePicker: true,
      timePickerIncrement: 30,
      locale: {
        format: 'MM/DD/YYYY hh:mm A'
      }
    })
    //Date range as a button
    $('#daterange-btn').daterangepicker(
            {
              ranges   : {
                'Today'       : [moment(), moment()],
                'Yesterday'   : [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days' : [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month'  : [moment().startOf('month'), moment().endOf('month')],
                'Last Month'  : [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
              },
              startDate: moment().subtract(29, 'days'),
              endDate  : moment()
            },
            function (start, end) {
              $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'))
            }
    )

    //Timepicker
    $('#timepicker').datetimepicker({
      format: 'LT'
    })

    //Bootstrap Duallistbox
    $('.duallistbox').bootstrapDualListbox()

    //Colorpicker
    $('.my-colorpicker1').colorpicker()
    //color picker with addon
    $('.my-colorpicker2').colorpicker()

    $('.my-colorpicker2').on('colorpickerChange', function(event) {
      $('.my-colorpicker2 .fa-square').css('color', event.color.toString());
    });

    $("input[data-bootstrap-switch]").each(function(){
      $(this).bootstrapSwitch('state', $(this).prop('checked'));
    });

  })
</script>

<script th:inline="javascript">
  $(document).ready(function(){
      // $.get("/airway/findAll",function(data,status){
      //   for(var i=0;i<data.length;i++){
      //     var name = data[i].airwayName;
      //     var id = data[i].id;
      //     $("<option name_id=\'"+id+"\'" +">"+name+"</option>").appendTo('#airway');
      //   }
      // });

    $.get("/router/findAll",function(data,status){
      var router = data;
      //alert(router);
      $.get("/city/findAll",function(data,status){
        var city = data;
        //alert(router);
        for(var i=0;i<router.length;i++){
          var routerId = router[i].id;
          var fromCityId = router[i].fromCityId;
          var fromCity;
          for (var j=0;j<city.length;j++){
            if(city[j].id == fromCityId){
              fromCity = city[j].city;
              break;
            }
          }
          var toCityId = router[i].toCityId;
          var toCity;
          for (var j=0;j<city.length;j++){
            if(city[j].id == toCityId){
              toCity = city[j].city;
              break;
            }
          }
          $("<option router_id=\'"+routerId+"\'" +">"+fromCity+"-"+toCity+"</option>").appendTo('#router');
        }
      });
    });

    $("#search").click(function(){
      var router = $('#router').val();
      //alert(router);
      var city = router.split("-");
      var fromCity = city[0];
      var tocity = city[1];
      //alert(tocity);
      $.get("/flight/findByFTCity/"+fromCity+"/"+tocity, function(data,status){
       //alert(data);
        var a = [];
        for (var i=0;i<data.length;i++){
          var list = "<tr class='find'>"+"<td>"+data[i].id+"</td>"+
                  "<td>"+data[i].airwayName+"</td>"+
                  "<td>"+data[i].fromCity+"-"+data[0].toCity+"</td>"+
                  "<td>"+data[i].fromTime+"</td>"+
                  "<td>"+data[i].toTime+"</td>"+
                  "<td><button id='book_"+i+"'"+ "onclick='book(this)' type=\"button\" class=\"btn btn-block bg-gradient-primary btn-sm\">预定</button></td>"
                  +"</tr>";
          a.push(list);
          // $("<tr>"+"<td>"+data[i].id+"</td>"+
          //         "<td>"+data[i].airwayName+"</td>"+
          //         "<td>"+data[i].fromCity+"-"+data[0].toCity+"</td>"+
          //         "<td>"+data[i].fromTime+"</td>"+
          //         "<td>"+data[i].toTime+"</td>"+
          //         "<td><button type=\"button\" class=\"btn btn-block bg-gradient-primary btn-sm\">预定</button></td>"
          //         +"</tr>").appendTo('#flightList');
        }
        $('#flightList').empty();
        $(a.join()).appendTo('#flightList');
      });
    });

  });

  function book(obj) {
    var userID = [[${session.userId}]];
    var flightID = $(obj).parents("tr").find('td').eq(0).text();
    var seatID = 0;
    var price = 0;
    $.get("seat/findByFlightId/"+flightID,function(data,status){
      seatID = data[0].id;
      //alert(seatID);
      $.get("price/findByFlightId/"+flightID,function(data,status){
        price = data[0].price;
        //alert(price);
        var array={"userId":userID , "flightId":flightID ,"seatId": seatID,"price":price};
        $.ajax({
          type:'post',
          url: '/pay/save',
          contentType:'application/json;charset=utf-8',
          dataType:'json',
          data:JSON.stringify(array),
          async: false,
          success:function(result){
              //alert("success");
          },
          error:function (data, textStatus, jqXHR) {
            //alert("success");
          }
        });
        $.post("/seat/book/"+seatID,function(data,status){
          alert("Status: " + status);
        });
      });

    });


  }
</script>

<script>


</script>

</body>
</html>
